<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑个人资料</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .form-container {
            max-width: 800px;
            margin: 40px auto;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 0 30px rgba(0,0,0,0.1);
            background-color: #fff;
        }
        .avatar-preview {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #eaeaea;
            cursor: pointer;
            transition: all 0.3s;
        }
        .avatar-preview:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        .required-label:after {
            content: " *";
            color: #dc3545;
        }
        .upload-hint {
            font-size: 0.85rem;
            color: #6c757d;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="form-container">
            <h2 class="text-center mb-4"><i class="fas fa-user-edit me-2"></i>编辑个人资料</h2>
            
            <!-- 表单区域 -->
            <form method="POST" enctype="multipart/form-data" novalidate>
                {{ form.hidden_tag() }}
                
                <!-- 头像上传区 -->
                <div class="text-center mb-5">
                    <div class="d-inline-block position-relative">
                        <img id="avatar-preview" 
                            {% if current_user.avatar %}
                            src="{{ url_for('web.media_images', filename=current_user.avatar) }}" 
                            {% else %}
                            src="{{ url_for('web.media_images', filename='default.png') }}"
                            {% endif %}
                            class="avatar-preview" 
                            alt="当前头像">
                        <div class="position-absolute bottom-0 end-0 bg-primary rounded-circle p-2">
                            <i class="fas fa-camera text-white"></i>
                        </div>
                    </div>
                    <div class="mt-2">
                        {{ form.avatar(class="d-none", id="avatar-upload") }}
                        <label for="avatar-upload" class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-sync me-1"></i>更换头像
                        </label>
                        <p class="upload-hint mt-2">支持 JPG/PNG 格式，大小不超过 3MB</p>
                        {% for error in form.avatar.errors %}
                            <div class="alert alert-danger mt-2">{{ error }}</div>
                        {% endfor %}
                    </div>
                </div>
                
                <!-- 基本信息编辑区 -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="mb-3">
                            {{ form.nickname.label(class="form-label required-label") }}
                            {{ form.nickname(class="form-control" + (' is-invalid' if form.nickname.errors else ''), 
                                placeholder="请输入昵称", value=current_user.nickname) }}
                            {% for error in form.nickname.errors %}
                                <div class="invalid-feedback">{{ error }}</div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            {{ form.email.label(class="form-label required-label") }}
                            {{ form.email(class="form-control" + (' is-invalid' if form.email.errors else ''), 
                                placeholder="example@domain.com", value=current_user.email) }}
                            {% for error in form.email.errors %}
                                <div class="invalid-feedback">{{ error }}</div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="mb-3">
                            {{ form.gender.label(class="form-label required-label") }}
                            {{ form.gender(class="form-select" + (' is-invalid' if form.gender.errors else '')) }}
                            {% for error in form.gender.errors %}
                                <div class="invalid-feedback">{{ error }}</div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            {{ form.country.label(class="form-label required-label") }}
                            {{ form.country(class="form-select" + (' is-invalid' if form.country.errors else '')) }}
                            {% for error in form.country.errors %}
                                <div class="invalid-feedback">{{ error }}</div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                
                <!-- 个人简介 -->
                <div class="mb-4">
                    <label class="form-label">个人简介</label>
                    <textarea class="form-control" name="bro" rows="4" 
                        placeholder="介绍一下自己...">{{ current_user.bro or '' }}</textarea>
                </div>
                
                <!-- 操作按钮 -->
                <div class="d-flex justify-content-between mt-5">
                    <a href="{{ url_for('web.profile') }}" class="btn btn-lg btn-outline-secondary">
                        <i class="fas fa-times me-1"></i> 取消
                    </a>
                    <button type="submit" class="btn btn-lg btn-primary">
                        <i class="fas fa-save me-1"></i> 保存修改
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 头像预览功能 -->
    <script>
        // 头像预览功能
        document.getElementById('avatar-upload').addEventListener('change', function(e) {
            if (this.files && this.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('avatar-preview').src = e.target.result;
                }
                reader.readAsDataURL(this.files[0]);
            }
        });
        
        // 表单提交前显示加载状态
        document.querySelector('form').addEventListener('submit', function() {
            const submitBtn = this.querySelector('button[type="submit"]');
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> 保存中...';
            submitBtn.disabled = true;
        });
    </script>
</body>
</html>